<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班数据分析系统</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <!-- 配置 Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        dark: '#0F172A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            }
            .section-transition {
                transition: all 0.3s ease-in-out;
            }
            .hover-scale {
                transition: transform 0.2s ease-in-out;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-primary text-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-plane text-2xl"></i>
                <h1 class="text-xl font-bold">航班数据分析系统</h1>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="{{ url_for('admin_index' if session.get('role') == 'admin' else 'index') }}"
                   class="hover:text-secondary transition-colors">首页</a>
                <a href="{{ url_for('routes') }}" class="hover:text-secondary transition-colors">航线分布</a>
                <a href="{{ url_for('airlines') }}" class="hover:text-secondary transition-colors">航空公司</a>
                <a href="{{ url_for('statistics') }}" class="hover:text-secondary transition-colors">航班统计</a>
                <a href="{{ url_for('price_revenue') }}" class="hover:text-secondary transition-colors">票价-收入</a>
                <a href="{{ url_for('about') }}" class="hover:text-secondary transition-colors">关于系统</a>
            </div>
            <button class="md:hidden text-white focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="bg-white p-8 rounded-lg shadow-md">
            <h2 class="text-2xl font-bold mb-4">关于航班数据分析系统</h2>
            <p class="mb-4">航班数据分析系统是一个基于Python Flask和ECharts构建的航空数据分析平台，旨在为用户提供全面的航班数据可视化服务。通过该系统，用户可以深入了解航空运输状况与趋势，包括航线分布、航空公司表现以及航班统计等方面的信息。</p>
            <h3 class="text-xl font-bold mb-2">系统特点</h3>
            <ul class="list-disc pl-5 space-y-2 mb-4">
                <li>动态航线可视化与top10的繁忙城市对航线和客流量，直观展示航线网络和航班流量。</li>
                <li>航空公司市场份额与机型使用统计，帮助用户评估航空公司的竞争力。</li>
                <li>航班时间分布与准点率分析，了解航班运营的时间规律和机型偏好。</li>
                <li>探索票价分布情况、不同飞行时长区间的票价分布及平均收入随飞行时长的变化，为收入分析提供数据支持。</li>
                <li>航班量趋势预测与历史数据分析，为决策提供数据支持。</li>
            </ul>
            <h3 class="text-xl font-bold mb-2">数据来源</h3>
            <p>本系统的数据基于2024年10-12月的航空数据，确保了数据的时效性和准确性。</p>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h4 class="text-lg font-bold mb-4">航班数据分析系统</h4>
                    <p class="text-gray-400">
                        基于Python Flask和ECharts构建的航空数据分析平台，为您提供全面的航班数据可视化服务。
                    </p>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="{{ url_for('admin_index' if session.get('role') == 'admin' else 'index') }}"
                                class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="{{ url_for('routes') }}" class="text-gray-400 hover:text-white transition-colors">航线分布</a></li>
                        <li><a href="{{ url_for('airlines') }}" class="text-gray-400 hover:text-white transition-colors">航空公司</a></li>
                        <li><a href="{{ url_for('statistics') }}" class="text-gray-400 hover:text-white transition-colors">航班统计</a></li>
                        <li><a href="{{ url_for('price_revenue') }}" class="text-gray-400 hover:text-white transition-colors">票价-收入</a></li>
                        <li><a href="{{ url_for('about') }}" class="text-gray-400 hover:text-white transition-colors">关于系统</a></li>

                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">联系我们</h4>
                    <p class="text-gray-400">如果您有任何问题或建议，请随时联系我们。</p>
                    <p class="text-gray-400">邮箱：<a href="mailto:info@example.com" class="text-white hover:underline">info@example.com</a></p>
                </div>
            </div>
            <div class="text-center text-gray-500 mt-8">
                <p>&copy; 2024 航班数据分析系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>
</body>
</html>